<template>
  <div class="content-box">
    <div class="top-content">
      <div class="top-content-box">
        <div class="top-content-tipsTitle">警告:</div>
        <div class="top-content-button">
          <el-button class="button-padding" type="primary" @click="handleEdit">{{ editShowName }}</el-button>
          <el-button v-if="editStatus" class="button-padding" type="primary" @click="handleSave">保存</el-button>
        </div>
      </div>
      <div class="top-content-tips">
        设置不同学历薪资请注意合理性，编辑时将某一学历薪资设置为0或者不填，将隐藏某一段学历薪资，一旦修改将对职业大全PC端、小程序端都产生影响，修改保存后展示图表可能不会立即生效，数据会在整点时刻进行刷新，请前往职业大全PC端和小程序查看验证该职业薪酬数据展示是否正确！
      </div>
      <div class="bottom-box"></div>
    </div>
    <div class="bottom-content">
      <div class="content-item" v-for="(item, index) in showNationwideEduSalary" :key="index" :style="
          editStatus || (!editStatus && item.salary > 0)
            ? 'height:60px;border-bottom: 1px solid #dcdfe6 !important;'
            : 'height:0px;border-bottom: 1px solid transparent !important;'
        ">
        <div v-if="editStatus || (!editStatus && item.salary > 0)" class="city">
          {{ item.name }}
        </div>
        <el-input v-if="editStatus || (!editStatus && item.salary > 0)" v-model="item.salary" :disabled="!editStatus"
          :placeholder="'请输入合理的' + item.name + '薪资'" @input="handleRowClick(item)"></el-input>
        <div v-if="editStatus || (!editStatus && item.salary > 0)" class="rmb">
          元/月
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { updateBaseSalary, getBaseSalary } from "@/api/salary";
import { reqStatisticBurry } from "@/api/home.js";
export default {
  name: "percentSalarySetting",
  components: {},
  props: {
    nationwideEduSalary: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      positionId: "",
      loading: false,
      editShowName: "编辑",
      editStatus: false,
      showNationwideEduSalary: [],
    };
  },
  watch: {
    nationwideEduSalary: {
      handler(newValue, oldValue) {
        // //console.log("nationwideEduSalary-------watch------》", newValue);
        this.showNationwideEduSalary = newValue;
      },
      immediate: true,
    },
  },
  created() {
    this.positionId = this.$route.query.id;
    this.showNationwideEduSalary = this.nationwideEduSalary;
    // this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      let params = {
        ylPositionId: this.positionId,
      };
      //console.log("params---getBaseSalary--------->--------->", params);
      getBaseSalary(params)
        .then((res) => {
          this.loading = false;
          if (+res.code === 200) {
            this.showNationwideEduSalary = res.data.nationwideEduSalary;
            console.log(
              "getBaseSalary--------->",
              this.showNationwideEduSalary
            );
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleSelect(key, keyPath) {
      //console.log("handleSelect--------->", key, keyPath);
      this.activeIndex = key;
    },
    handleEdit() {
      if (this.editStatus) {
        this.$confirm(
          "现在退出将无法保存你修改的数据，是否现在退出编辑？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          this.editStatus = false;
          this.editShowName = "编辑";
          this.getData();
        });
      } else {
        this.editStatus = true;
        this.editShowName = "退出编辑";
      }
    },
    handleSave() {
      this.loading = true;
      let params = {
        ylPositionId: this.positionId,
        nationwideEduSalary: this.showNationwideEduSalary,
      };
      //   //console.log("params---getData--------->", params);
      updateBaseSalary(params)
        .then((res) => {
          this.loading = false;
          if (+res.code === 200) {
            this.editStatus = false;
            this.editShowName = "编辑";
            this.$message({
              message: res.status_desc,
              type: "success",
            });
            this.addLog();
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    addLog() {
      const params = {
        burryPage: "/#/position",
        eventType: "4",
        description: "学历薪酬模型编辑",
        ylPositionId: this.positionId,
      };
      reqStatisticBurry(params);
    },
    handleRowClick(item) {
      // 使用正则表达式过滤非数字和小数点字符
      item.salary = item.salary.replace(/[^0-9.]/g, "");

      // 获取小数点的索引位置
      const dotIndex = item.salary.indexOf(".");

      // 如果小数点存在且小数点后有多于一位的数字，则截取小数点后一位
      if (dotIndex !== -1 && item.salary.length - dotIndex > 3) {
        item.salary = item.salary.slice(0, dotIndex + 3);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  display: block;
  padding: 14px 14px 14px 14px;
  background: #fff;

  .top-content {
    width: 100%;
    //   height: 100px;
    .top-content-box {
      display: flex;
      height: 60px;
      padding: auto 20px;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      .top-content-tipsTitle {
        font-size: 24px;
        font-weight: bold;
        color: #ea0d0d;
      }
      .top-content-button {
        display: flex;

        .button-padding {
          padding-right: 20px;
        }
      }
    }
    .top-content-tips {
      color: #555;
      font-size: 14px;
      padding: 10px 0px;
      // height: 60px;
      line-height: 30px;
    }
    .right-box {
      background-color: rgb(206, 24, 124);
    }
  }

  .bottom-content {
    display: block;
    width: 100%;
    height: 500px;
    overflow-y: auto;
    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      //   border-top: 1px solid #dcdfe6 !important;
      border-bottom: 1px solid #dcdfe6 !important;
      background-color: #f5f5f5;
      .city-header {
        width: 200px;
      }
      .rank-header {
        width: 50px;
        text-align: center;
      }
      .sort-header {
        width: 80px;
        text-align: center;
      }
    }
    .content-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60px;
      //   border-top: 1px solid #dcdfe6 !important;
      border-bottom: 1px solid #dcdfe6 !important;
      .city {
        width: 200px;
      }
      .rank {
        width: 50px;
        text-align: center;
      }
      .rmb {
        padding-left: 5px;
        font-size: 18px;
        // font-weight: bold;
        color: #555;
      }
    }
    .isStartSort {
      background-color: #dcdfe6;
    }
  }
  //   ::v-deep .el-select {
  //     height: 32px;
  //   }
  ::v-deep .el-input {
    width: 215px;
    text-align-last: right;
    // text-align: center;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #222;
    cursor: not-allowed;
    font-size: 16px;
  }
  ::v-deep .el-icon-sort {
    width: 80px;
    text-align: center;
  }
  ::v-deep .el-select .el-input__inner {
    height: 40px;
  }
  ::v-deep .el-select-dropdown__item.selected {
    color: #1890ff;
    font-weight: 700;
  }
}
</style>
